<template>
  <div class="my-icons">
    <div>使用方法：<span v-text='`<SvgIcon :svgName="图标名称（必选）" :width="图标大小 如：14px" :height="图标高度 如：14px" />`'></span></div>
    <ul>
        <li v-for="(it, index) in icons" :key="index">
            <SvgIcon :svgName="it" :width="'40px'" :height="'40px'" />
            <div class="icon-name">{{it}}</div>
        </li>
    </ul>
 </div>
</template>

<script>
import icons from '@/components/SvgIcon/svg-icons';
import SvgIcon from '@/components/SvgIcon';

export default {
  name: 'MyIcons',
  components:{ SvgIcon },
  data() { 
    return {
        icons
    }
  },
  methods:{

  },
 }
</script>

<style lang="less" scoped>
.my-icons{
    ul{
        margin: 0px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;

        li{
            list-style: none;
            border: 1px solid #ccc;
            text-align: center;
            width: 100px;
            padding-top: 10px;

            .icon-name{
                font-size: 13px;
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }
}
</style>